<!--
 * @Description: 软终端 - 单点配置项
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-08-04 14:21:49
 * @LastEditTime: 2021-09-15 16:36:17
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="12" :lg="8">
      <div class="device device-ne">
        <div class="title">
          <i class="iconfont" style="color: #95DE64; background: rgba(149, 222, 100, 0.15)">&#xe6b2;</i>
          软终端信息
          <el-button icon="el-icon-sort" type="text" @click="cancel">切换</el-button>
        </div>
        <div class="content">
          <div class="ne-left">
            <img src="/static/images/pc.png" />
            <div>
              <span v-if="introduce.status === 0">
                <i class="i-success"></i>
                已登录
              </span>
              <span v-else>
                <i class="i-error"></i>
                未登录
              </span>
            </div>
          </div>
          <div class="ne-right">
            <ul>
              <li>
                <label>名称</label>
                <span>{{introduce.name}}</span>
              </li>
              <li>
                <label>序列号</label>
                <span :title="introduce.deviceId">{{introduce.deviceId}}</span>
              </li>
              <li>
                <label>MAC</label>
                <span>{{introduce.hostId}}</span>
              </li>
              <li>
                <label>用户名</label>
                <span>{{introduce.userName}}</span>
              </li>
              <li>
                <label>授权码</label>
                <span :title="introduce.licenseKey">{{introduce.licenseKey}}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="12" :lg="8">
      <div class="device device-site">
        <div class="title">
          <i
            class="iconfont icon-alter"
            style="color: rgb(24, 144, 255); background: rgb(230, 247, 255)"
          ></i> 隧道信息
        </div>
        <div class="content">
          <ul>
            <li>
              <label>隧道状态</label>
              <span>{{introduce.extAttrs.tunnel.tunnelStatus === 100 ? '正常' : introduce.extAttrs.tunnel.tunnelStatus === 101 ? '无法建立隧道' : 'VPN隧道已断开'}}</span>
            </li>
            <li>
              <label>出/入方向速率</label>
              <span>{{introduce.extAttrs.tunnel.upStreamRate}} / {{introduce.extAttrs.tunnel.downStreamRate}}kbps</span>
            </li>
            <li>
              <label>时延/抖动/丢包率</label>
              <span>{{introduce.extAttrs.tunnel.latency}}ms / {{introduce.extAttrs.tunnel.jitter}}ms / {{introduce.extAttrs.tunnel.loss}}%</span>
            </li>
            <li>
              <label>创建时间</label>
              <span>{{introduce.extAttrs.tunnel.createTime | filterTime}}</span>
            </li>
            <li>
              <label>数据图表</label>
              <span>
                <i class="el-icon-data-line" @click="tunnelCharts"></i>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="8">
      <div class="device device-options">
        <div class="title">
          <i
            class="iconfont icon-caidanguanli"
            style="color: #1890FF; background-color: rgb(230, 247, 255)"
          ></i> 配置项
        </div>
        <div class="content">
          <ul>
            <li
              v-for="(item, idx) in option"
              :key="idx"
              :class="idx === index ? 'hover' : ''"
              @click="handleTabs(item, idx)"
            >
              <i :class="item.icon"></i>
              {{item.title}}
            </li>
          </ul>
        </div>
      </div>
    </el-col>
    <el-col v-if="chartType === 'tunnel'" :xs="24" :sm="24" :lg="24">
      <monitor ref="tunnelChart" :introduce="introduce" />
    </el-col>
    <el-col :xs="24" :sm="24" :lg="24">
      <el-tabs v-model="active" class="tabs-box" type="card">
        <el-tab-pane v-if="index === 0" label="ACL规则" name="acl">
          <acl :introduce="introduce" />
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import acl from '../acl';
import monitor from '../monitor';

export default {
  props: ['introduce'],
  components: {
    acl,
    monitor
  },
  data () {
    return {
      option: [{
        icon: 'el-icon-copy-document',
        title: 'ACL规则'
      }],
      index: 0,
      active: 'acl',
      chartType: null
    };
  },
  filters: {
    // 过滤时间
    filterTime (val) {
      if (val === undefined || val === null || val === '') {
        val = '';
      } else {
        val = val.substring(0, 19);
      }
      return val;
    }
  },
  methods: {
    // 隧道监控
    tunnelCharts (val) {
      let _this = this;
      _this.chartType = 'tunnel';
      if (_this.$refs['tunnelChart']) {
        _this.$refs['tunnelChart'].type = '自定义';
      }
    },
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', false);
    },
    // 点选
    handleTabs (item, idx) {
      let _this = this;
      this.index = idx;
      switch (idx) {
        case 0:
          _this.active = 'acl';
          break;
        default:
          _this.active = 'acl';
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.device {
  width: 100%;
  background: #fff;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
  margin-bottom: 20px;
  .title {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    color: #555;
    font-size: 15px;
    i {
      border-radius: 50%;
      padding: 3px;
      margin-left: 10px;
    }
  }
}
.device-ne {
  ::v-deep .el-button {
    float: right;
    margin-right: 12px;
    padding: 0;
  }
  .content {
    display: inline-block;
    width: 100%;
    .ne-left {
      float: left;
      width: 120px;
      img {
        display: block;
        width: 80px;
        margin: 0 auto;
        margin-top: 50px;
      }
      span {
        display: block;
        width: 100%;
        text-align: center;
        i {
          position: relative;
          display: inline-block;
          border-radius: 50%;
          width: 10px;
          height: 10px;
          top: 0;
          left: -10px;
          &.i-success {
            background: #19be6b;
          }
          &.i-error {
            background: #ed4014;
          }
          &.i-warning {
            background: #f90;
          }
          @keyframes scale {
            0% {
              transform: scale(1.1);
            }
            50%,
            75% {
              transform: scale(1.3);
            }
            78%,
            100% {
              opacity: 0;
            }
          }
          @keyframes scales {
            0% {
              transform: scale(1.1);
            }
            50%,
            75% {
              transform: scale(1.5);
            }
            78%,
            100% {
              opacity: 0;
            }
          }
        }
        i::before {
          position: absolute;
          top: -1px;
          left: -1px;
          content: "";
          display: block;
          width: 12px;
          height: 12px;
          border-radius: 50%;
          opacity: 0.6;
          animation: scale 3s infinite cubic-bezier(0, 0, 0.49, 1.02);
        }
        .i-success::before {
          background: #19be6b;
        }
        .i-error::before {
          background: #ed4014;
        }
        .i-warning::before {
          background: #f90;
        }
      }
    }
    .ne-right {
      width: calc(100% - 120px);
      float: right;
      ul {
        width: 100%;
        padding: 11px 0;
        li {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin-bottom: 3px;
          label {
            display: inline-block;
            text-align: center;
            color: #333;
            font-size: 14px;
            line-height: 32px;
            width: 80px;
            background: #f8f8f9;
          }
          span {
            font-size: 14px;
            line-height: 32px;
            color: #333;
            width: calc(100% - 105px);
            padding: 0 10px;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.device-site {
  .content {
    padding: 11px;
    ul {
      width: 100%;
      li {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 3px;
        label {
          display: inline-block;
          text-align: center;
          color: #333;
          font-size: 14px;
          line-height: 32px;
          width: 140px;
          background: #f8f8f9;
        }
        span {
          display: inline-table;
          font-size: 14px;
          line-height: 32px;
          color: #333;
          width: calc(100% - 165px);
          padding: 0 10px;
        }
        &:last-child {
          margin-bottom: 0;
          i {
            cursor: pointer;
            color: #409eff;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }
  }
}
.device-options {
  .content {
    padding: 10px;
    ul {
      display: inline-block;
      width: 100%;
      height: 172px;
      overflow: hidden;
      li {
        width: 33.33333333%;
        height: 76px;
        float: left;
        text-align: center;
        font-size: 14px;
        padding: 5px 0;
        cursor: pointer;
        &:hover {
          color: #3296fa;
          i {
            color: #3296fa;
          }
        }
        i {
          display: block;
          font-size: 30px;
          text-align: center;
          margin: 10px 0;
        }
      }
      .hover {
        color: #3296fa;
        i {
          color: #3296fa;
        }
      }
      &:last-child::after {
        overflow: hidden;
        content: "";
        clear: both;
      }
    }
  }
}
.tabs-box {
  background: #fff;
  padding: 10px;
}
</style>